<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
    <style>
        .container {
            width: 350px;
            height: 300px;
            margin: 0 auto;
            /* border: 1px black solid; */
            text-align: center;
        }

        .grey {
            color: grey;
        }

        .container .row {
            width: 350px;
            height: 40px;

            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .container .row input {
            width: 260px;
            height: 30px;
        }

        #submit {
            width: 350px;
            height: 40px;
            background-color: orange;
            color: white;
            border: none;
            margin: 10px;
            border-radius: 5px;
            font-size: 20px;
        }
    </style>
</head>

<body>
<div class="container">
    <h1>留言板</h1>
    <p class="grey">输入后点击提交, 会将信息显示下方空白处</p>
    <div class="row">
        <span>谁:</span> <input type="text" name="" id="from">
    </div>
    <div class="row">
        <span>对谁:</span> <input type="text" name="" id="to">
    </div>
    <div class="row">
        <span>说什么:</span> <input type="text" name="" id="say">
    </div>
    <input type="button" value="提交" id="submit" onclick="submit()">

</div>

<script src="jquery-3.7.1.js"></script>
<script>

    function submit(){
        let from = $("#from").val();
        let to = $("#to").val();
        let say = $("#say").val();
        if(from==="" || to === "" || say === ""){
            return;
        }

        var data = {
            from: from,
            to: to,
            message: say
        };

        $.ajax({
            type:"post",
            url:"message/publish",
            contentType:"application/json",
            data:JSON.stringify(data),
            success:function (result) {

                //let jsonObj = JSON.parse(result);
                //if (jsonObj.ok == 1)

                if (result.ok == 1) {
                    // 成功
                    // 构造节点
                    let html = "<div>"+from+" 对 "+to+" 说: "+say+"</div>"
                    $(".container").append(html);

                    $("#from").val("");
                    $("#to").val("");
                    $("#say").val("");
                }else {
                    // 失败
                    alert("留言发布失败");
                }
            }
        })


    }

</script>
</body>

</html>